/*
* @Author: sc
* @Date:   2019-01-11 21:19:14
* @Last Modified by:   sc
* @Last Modified time: 2019-01-20 15:47:43
*/

import React from 'react';
import {
  Table, Input, Button, Popconfirm, Form, Divider
} from 'antd';
import {inject, observer } from 'mobx-react';
import './index.css'
const FormItem = Form.Item;
const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);

@inject('store')
@observer
class EditableCell extends React.Component {
  state = {
    editing: false,
  }

  componentDidMount() {
    if (this.props.editable) {
      document.addEventListener('click', this.handleClickOutside, true);
    }
  }

  componentWillUnmount() {
    if (this.props.editable) {
      document.removeEventListener('click', this.handleClickOutside, true);
    }
  }

  toggleEdit = () => {
    const editing = !this.state.editing;
    this.setState({ editing }, () => {
      if (editing) {
        this.input.focus();
      }
    });
  }

  handleClickOutside = (e) => {
    const { editing } = this.state;
    if (editing && this.cell !== e.target && !this.cell.contains(e.target)) {
      this.save();
    }
  }

  save = () => {
    const { record, handleSave } = this.props;
    this.form.validateFields((error, values) => {
      if (error) {
        return;
      }
      this.toggleEdit();
      handleSave(record, values);
    });
  }

  render() {
    const { editing } = this.state;
    const {
      editable,
      dataIndex,
      title,
      record,
      index,
      handleSave,
      ...restProps
    } = this.props;
    return (
      <td ref={node => (this.cell = node)} {...restProps}>
        {editable ? (
          <EditableContext.Consumer>
            {(form) => {
              this.form = form;
              return (
                editing ? (
                  <FormItem style={{ margin: 0 }}>
                    {form.getFieldDecorator(dataIndex, {
                      rules: [{
                        required: true,
                        message: `${title} is required.`,
                      }],
                      initialValue: record[dataIndex],
                    })(
                      <Input
                        ref={node => (this.input = node)}
                        onPressEnter={this.save}
                      />
                    )}
                  </FormItem>
                ) : (
                  <div
                    className="editable-cell-value-wrap"
                    style={{ paddingRight: 24 }}
                    onClick={this.toggleEdit}
                  >
                    {restProps.children}
                  </div>
                )
              );
            }}
          </EditableContext.Consumer>
        ) : restProps.children}
      </td>
    );
  }
}

@inject('store')
@observer
class EditableTable extends React.Component {
  constructor(props) {
    super(props);
  }

  handleFinish = (row) => {
    this.props.store.finishThing(row);
  }

  handleDelete = (row) => {
    this.props.store.deleteThing(row);
  }
  handleSave = (record, values) => {
    this.props.store.updateThing(record.id, values.info);
  }
  setClass(item, index){
    if(item.status === '已完成'){
      return "finish";
    }else{
      return "not-finish";
    }
  }
  render() {
    const opear = {
      title: '操作',
      dataIndex: 'operation',
      render: (text, record) => (
        this.props.dataSource.length >= 1
          ? (
            <div>
              <Popconfirm title="你确定要完成吗？" onConfirm={() => this.handleFinish(record.key)}>
                <a className="op-finish" href="javascript:;">完成</a>
              </Popconfirm>
              <Divider type="vertical" />
              <Popconfirm title="你确定要删除吗？" onConfirm={() => this.handleDelete(record.key)}>
                <a className="op-delete" href="javascript:;">删除</a>
              </Popconfirm>
            </div>
          ) : null
      ),
    };
    this.props.headers.push(opear);
    const dataSource  = this.props.dataSource;
    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    };
    const columns = this.props.headers.map((col) => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave,
        }),
      };
    });
    return (
      <div>
        <Table
          components={components}
          rowClassName={() => 'editable-row'}
          rowClassName={this.setClass.bind(this)}
          bordered
          dataSource={dataSource}
          columns={columns}
          pagination={
            false
          }
        />
      </div>
    );
  }
}
export default EditableTable;
